import React, { useState, useEffect, useRef } from "react";
import StoreForm from "@/components/TopForm";
import SalesData from "@/components/Home/Sales";
import Identity from "@/components/Home/Identity";
import Service from "@/components/Home/Service";
import Join from "@/components/Home/Join";
import Why from "@/components/Home/Why";
import Footer from "@/components/Home/Footer";
import FormModal from "@/components/Home/FormModal";
import SuccessModal from "@/components/Home/SuccessModal";
import { getPageSourceInfo } from "../../../shared/util";

function Home() {
	const homeRef = useRef<any>(null);
	const scrollRef = useRef(0);
	const { origin } = getPageSourceInfo();
	const [showFooter, setShowFooter] = useState(false);
	const [showSuccessModal, setShowSuccessModal] = useState(false);
	const [showFormModal, setShowFormModal] = useState(false);
	const [scrollY, setScrollY] = useState(0);
	const [qrUrl, setQrUrl] = useState("");
	useEffect(() => {
		if ((window as any) && (window as any).goldlog) {
			(window as any).goldlog.record(
				"/sc.supplier.newsign",
				"EXP",
				`btn=leads_form_page_exp&origin=${origin}`,
				"GET"
			);
			// (window as any).hasRecordPageExp = true;
		}
		window.addEventListener("scroll", handleScroll);
		return () => {
			window.removeEventListener("scroll", handleScroll);
		};
	}, []);
	useEffect(() => {
		const homeHeight = homeRef.current?.clientHeight;
		if (scrollY > scrollRef.current && scrollY / homeHeight >= 0.25) {
			if (!showFooter && !localStorage.getItem("hideFooter")) setShowFooter(true);
		}
		if (scrollY <= scrollRef.current && scrollY / homeHeight < 0.25 && showFooter) {
			setShowFooter(false);
		}
	}, [scrollY])
	useEffect(() => {
		// 及时更新 count 值
		scrollRef.current = scrollY;
	});
	const handleScroll = (e: any) => {
		setScrollY(window.scrollY);
	};
	return (
		<div className={showFooter ? 'home' : 'home no-pb'} ref={homeRef}>
			<div className='header'>
				<picture>
					<img src={require("@/assets/imgs/ship.png")} />
				</picture>
				<div className="header-wrapper">
					<div className='header-content'>
						<div className='logo'>
							<img src={require("@/assets/imgs/ali-logo.png")} alt='' />
						</div>
						<div className='out-sea-title'>全球数字化出海服务平台</div>
						<div className='out-sea-desc'>
							我们致力于提供全球领先的数字外贸服务，帮助每一个中小企业成为跨国公司让世界更小，生意更大
						</div>
					</div>
					<StoreForm formName="basicForm" setQrUrl={setQrUrl} setShowSuccessModal={setShowSuccessModal}></StoreForm>
				</div>

			</div>
			<SalesData></SalesData>
			<Identity setShowFormModal={setShowFormModal}></Identity>
			<Service setShowFormModal={setShowFormModal}></Service>
			<Join></Join>
			<Why></Why>
			{showFooter && (
				<Footer setShowFormModal={() => setShowFormModal(true)} onHideFooter={setShowFooter}></Footer>
			)}
			{
				showFormModal && (
					<FormModal setQrUrl={setQrUrl} setShowFooter={setShowFooter} setShowSuccessModal={setShowSuccessModal} showFormModal={showFormModal} onHide={() => setShowFormModal(false)}></FormModal>
				)
			}
			{
				showSuccessModal &&
					<SuccessModal
						showSuccessModal={showSuccessModal}
						setShowSuccessModal={setShowSuccessModal}
						qrUrl={qrUrl}
						setQrUrl={setQrUrl}
					></SuccessModal>
			}
		</div>
	);
}
export default Home;
